<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <script>
      // 一,什么是虚拟DOM?
      // 01.虚拟DOM是前端框架为了达到数据和页面同步的一个必要技术

      // 二,什么是diff算法?
      // diff算法介绍虚拟DOM从上到下进行同层比对(使用key)的时候,如果上层不同了,那么下面的DOM就会全部重新渲染,这样的好处是算法简单,减少了对比次数,

      // 三,diff算法的特点?
      // 01.diff算法只会进行同层级比较,不会跨层级比较
      // 02.在diff比较的过程中,diff会循环从两边向中间比较

      // 四,diff算法的步骤?
      // 01.先用js对象结构来模拟DOM树的结构
      // 02.然后用这个树构建一个真正的DOM树插入到文档当中,当状态变更的时候会重新构建一颗新的对象树
      // 03.然后用新的树和旧的树比较,记录下来两棵树的差异,然后把第二棵树所记录的差异再应用到真正的DOM树上,这样视图就更新了

      // 五,虚拟DOM的工作流程
      // 当页面初始的时候会生成一些数据,vue会根据数据来生成虚拟DOM树,再根据虚拟DOM生成真实DOM树,当数据变化的时候,会再次生成全部的数据的虚拟DOM,来和之前生成的虚拟DOM进行对比,找出本次更改的地方,再去完成真实DOM的更新

      // 六,为什么需要虚拟DOM?
      // 01.数据改动时如果直接生成真实DOM会导致界面中每个元素都重新生成一遍,所以为了减少对真实DOM的操作,我们就需要使用虚拟DOM来先进行一次旧数据和新数据的对比,找出不同点后再更新需要修改的真实DOM

      // 七,为什么部分人说虚拟DOM会提升性能呢?
      // 01.当数据改动时,不管虚拟DOM如何优化,最终都会更新真实DOM,所以虚拟DOM提升的是框架计算更新后数据的性能(双向绑定),不是页面的
      // 02.如果使用原生JS操作真实DOM并且不需要考虑数据和页面是否统一的情况下,直接操作真实DOM要比使用虚拟DOM的性能更高
    </script>
  </body>
</html>
